今天的目標就是讓清單可以「互動」,讓使用者能夠勾選任務是否完成,讓應用程式更接近真實的使用情境
建立 TodoItem 資料模型
• 我們會先新增一個 Todo 類別,讓每個待辦事項都有「名稱」與「是否完成」兩個屬性
• 這樣以後新增或刪除待辦事項時,就能用這個模型來管理資料
改用 ListView.builder 顯示清單
• 昨天我們是用靜態的 ListView + ListTile
• 今天要改成動態的 ListView.builder,它會依據代辦清單的資料數量,自動建立清單項目
加入 Checkbox 互動功能
• 每個待辦事項旁邊會有一個 Checkbox
• 當使用者勾選或取消勾選時,會更新該任務的完成狀態
畫面效果
• 當任務被勾選為完成,文字會加上刪除線,清楚區分已完成與未完成事項
• 這是我們第一次讓 TodoApp 有了「互動感」
學習心得
今天的重點在於把「資料」和「畫面」連接起來,這也是 Flutter 的核心:畫面會隨著狀態改變而自動更新,透過這個練習我更理解了 StatefulWidget 的用途,以及 setState() 如何幫助我們更新畫面。雖然程式碼比昨天多了一些,但看著 App 可以真正被操作,讓我覺得這個待辦清單越來越像一個真的產品了。